<script setup lang="ts">
import Question from './components/Question.vue'
</script>

<template>
  <div class="box">
    <!-- 第一行 -->
    <div class="one-row">
      <p class="one-row-title">面试通关特训营</p>
      <p class="one-row-content">30 天集中突击，高频真题一网打尽，面试遇原题</p>
      <p class="one-row-footer">第十期开营时间：9月24日 - 10月23日</p>
    </div>
    <!-- 第二行 -->
    <div class="two-row">
      <!-- 列1 -->
      <div class="one-col-box">
        <div class="one-col">
          <!-- 头部 -->
          <div class="col-header">
            <div class="header-left">
              <div class="span">加入训练营</div>
            </div>
          </div>
          <!-- title -->
          <div class="title">高效备战面试，拿高薪 offer</div>
          <!-- 价格 -->
          <div class="price">
            <span class="price-one">¥</span>
            <span class="price-two"
              >199
              <div class="price-reduce">春招特惠</div>
            </span>
            <span class="price-three">/永久</span>
            <span class="price-four">¥499</span>
          </div>
          <!-- 按钮 -->
          <div class="btn">立即开通</div>
          <!-- 会员协议 -->
          <div class="agreement">
            开通前请先阅读
            <a href="#">《面试刷题训练营介绍》</a>
          </div>
        </div>
      </div>
      <!-- 列2 -->
      <div class="two-col-box">
        <div class="two-col">
          <div class="two-col-header">
            <img class="two-col-img" src="./images/viplevel.svg" alt="" />
            <div class="two-col-title">训练营学员专属权益</div>
          </div>
          <div class="two-col-content">
            <div class="content-item"
              >跟着大厂面试官团队精心打造的课程表训练，由浅至深，高效构建系统的知识体系，快速提高面试能力</div
            >
            <div class="content-item">入营期间可免费畅刷面试马 9000+ 高频面试题库，解锁全部高质量题解 </div>
            <div class="content-item"
              >沉浸式学习氛围，每次练习都是一场模拟面试，资深面试官全程督学，让自律成为一种长期惯性</div
            >
            <div class="content-item"
              >独有的题解学习法，先输入再输出，通过刻意练习将知识点真正内化为自己的能力，吊打面试官</div
            >
          </div>
        </div>
      </div>
    </div>
    <!-- 第三行  -->
    <div class="three-row">
      <div class="three-row-title">🍃 提前批备战秋招</div>
      <div class="three-row-footer">
        <ul>
          <li>
            <span class="bullet">●</span>
            <span class="content">入营即可免费领取 2w+ 字保姆级写简历指南</span>
          </li>
          <li>
            <span class="bullet">●</span>
            <span class="content">群内获取持续更新的春秋招企业招聘表</span>
          </li>
          <li>
            <span class="bullet">●</span>
            <span class="content">特训营导师定期直播，优秀学员有机会上麦参与八股文拷打/模拟面试</span>
          </li>
          <li>
            <span class="bullet">●</span>
            <span class="content">统一的结营考试，检验学习成果，帮助你查漏补缺</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 第四行 -->
    <div class="four-row">
      <div class="four-row-title">为什么要加训练营？适合哪些同学？</div>
      <div class="four-row-header"
        >训练营学员可任意选择 Java、C++、Python、Go 的学习方向。如果你也有以下烦恼，让训练营帮你解决：</div
      >
      <div class="four-row-content">
        <div class="four-content-item">
          <div class="four-content-item-title"> 八股文太多太杂，不知道从何开始</div>
          <div class="four-content-item-content"> 💡无需自己到处找面试题和答案，我们帮你准备 </div>
        </div>
        <div class="four-content-item">
          <div class="four-content-item-title"> 面试突击时间紧张，需要提炼高频重点</div>
          <div class="four-content-item-content"> 💡每日科学高效的学习规划，直接跟着练即可 </div>
        </div>
        <div class="four-content-item">
          <div class="four-content-item-title"> 自己看完就忘，缺乏科学方法加深记忆</div>
          <div class="four-content-item-content">💡 训练营独有的题解归纳记忆法，把知识真正变成你的 </div>
        </div>
        <div class="four-content-item">
          <div class="four-content-item-title"> 感觉自己会了，但实际面试答不出来</div>
          <div class="four-content-item-content"> 通过训练营的刻意练习，帮助你轻松应对面试八股文 </div>
        </div>
        <div class="four-content-item">
          <div class="four-content-item-title"> 自控力差，没有学习氛围，需要外部力量监督</div>
          <div class="four-content-item-content"> 💡导师扮演面试官沉浸式督学，培养良好的学习习惯 </div>
        </div>
        <div class="four-content-item">
          <div class="four-content-item-title"> 学习过程中遇到问题不知道问谁</div>
          <div class="four-content-item-content">💡 训练营全程都将有资深导师为你答疑解惑 </div>
        </div>
      </div>
    </div>
    <!-- 第五行和第三行css相同 -->
    <div class="three-row">
      <div class="three-row-title">🎁 训练营奖励</div>
      <div class="three-row-footer">
        <ul>
          <li>
            <span class="bullet">●</span>
            <span class="content">入营即可获取训练营专属课程内容，开营期间（30 天内）可解锁面试马全部题目题解</span>
          </li>
          <li>
            <span class="bullet">●</span>
            <span class="content">优质题解奖：写高质量题解，获官方认证，领取现金红包奖励 🧧</span>
          </li>
          <li>
            <span class="bullet">●</span>
            <span class="content"
              >全勤奖：成功完成全部 30 天打卡的学员，将获得 1 个月老鱼简历会员和 60 元编程导航优惠券</span
            >
          </li>
          <li>
            <span class="bullet">●</span>
            <span class="content">特别奖：面试马站长请吃饭，结营后选择一位特别优秀努力的学员，线下进一步交流沟通</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 第六行和第四行css相同 -->
    <div class="four-row">
      <div class="four-row-title">往期好评，口碑见证</div>
      <div class="four-row-header"
        >面试遇原题，氛围超棒的学习圈子，精心规划的学习表，导师群内答疑解惑……这些都是来自用户的真实好评：</div
      >
    </div>
    <!-- 第七行 -->
    <div class="seven-row">
      <div class="seven-row-title">会员常见问题</div>
      <div class="seven-row-content">
        <Question></Question>
        <Question></Question>
        <Question></Question>
      </div>
      <div class="seven-row-footer">查看更多常见问题</div>
    </div>
    <!-- 第八行 -->
    <div class="eight-row">
      <div class="eight-row-btn">加入面试通关营</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 16px;
  box-sizing: border-box;
}
.one-row {
  width: 100%;
  margin-bottom: 20px;
  .one-row-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #000;
    margin-bottom: 16px;
  }
  .one-row-content {
    text-align: center;
    font-size: 18px;
    color: #9f9f9f;
    margin-bottom: 16px;
  }
  .one-row-footer {
    text-align: center;
    font-size: 18px;
    color: #9f9f9f;
  }
}

.two-row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  .one-col-box {
    flex: 0 0 29.166666666666668%;
    max-width: 29.166666666666668%;
    padding: 0 8px;
    box-sizing: border-box;
    //小于768宽度换行
    @media screen and (width<768px) {
      flex: 0 0 100%;
      max-width: 100%;
      margin-bottom: 16px;
    }
    .one-col {
      background: #424039;
      border-radius: 20px;
      padding: 20px 16px;
      box-sizing: border-box;
      .col-header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        .header-left {
          display: flex;
          align-items: center;
          img {
            width: 32px;
            height: 32px;
            margin-right: 8px;
          }
          .span {
            color: #fcefc2;
            font-weight: 400;
            font-size: 20px;
            letter-spacing: 2px;
          }
        }
        .header-right {
          cursor: pointer;
          color: #fcefc2;
          font-size: 12px;
          text-decoration: underline;
        }
      }
      .title {
        letter-spacing: 2px;
        white-space: nowrap;
        font-size: 16px;
        color: #9f9f9f;
        margin-bottom: 16px;
      }
      .price {
        display: flex;
        align-items: end;
        gap: 4px;
        padding-top: 6px;
        margin-bottom: 16px;
        .price-one {
          color: #fcefc2;
          margin-right: 2px;
        }
        .price-two {
          position: relative;
          color: #fcefc2;
          font-size: 40px;
          font-weight: 700;
          line-height: 1;
          .price-reduce {
            position: absolute;
            right: -70px;
            top: -15px;
            background-color: orange;
            padding: 4px 10px;
            box-sizing: border-box;
            color: #fff;
            font-size: 14px;
            border-radius: 8px 0 8px 0;
          }
        }
        .price-three {
          color: #9f9f9f;
          font-size: 16px;
        }
        .price-four {
          color: #9f9f9f;
          font-size: 12px;
          text-decoration: line-through;
        }
      }
      .btn {
        background: #e8cb96;
        width: 100%;
        font-weight: 700;
        border: none;
        cursor: pointer;
        border-radius: 99px;
        padding-block: 6px;
        font-size: 16px;
        text-align: center;
        margin-bottom: 20px;
        &:hover {
          background: #fcefc2;
        }
      }
      .agreement {
        color: #9f9f9f;
        a {
          color: #fcefc2;
        }
      }
    }
  }

  .two-col-box {
    flex: 0 0 70.83333333333334%;
    max-width: 70.83333333333334%;
    padding: 0 8px;
    box-sizing: border-box;
    //小于768宽度换行
    @media screen and (width < 768px) {
      flex: 0 0 100%;
      max-width: 100%;
      margin-bottom: 16px;
    }
    .two-col {
      width: 100%;
      height: 100%;
      border-radius: 20px;
      background: linear-gradient(180deg, #f4f4d0, #fff);
      padding: 20px;
      box-sizing: border-box;
      .two-col-header {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        gap: 5px;
        .two-col-img {
          width: 24px;
          height: 24px;
        }
        .two-col-title {
          font-size: 21px;
          font-weight: 700;
          white-space: nowrap;
        }
      }

      .two-col-content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        background-color: #fff;
        border-radius: 8px;
        padding: 10px;
        box-sizing: border-box;
        box-shadow: 0 1rem 1.5rem -0.5rem rgba(0, 0, 0, 0.1);
        .content-item {
          padding: 16px 8px;
          box-sizing: border-box;
          font-size: 14px;
          border-right: 1px solid #0505050f;
          border-bottom: 1px solid #0505050f;
        }
      }
    }
  }
}
.three-row {
  border-radius: 20px;
  background: linear-gradient(180deg, #f4f4d0, #fff);
  padding: 20px 16px;
  margin-bottom: 20px;
  .three-row-title {
    text-align: center;
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  .three-row-footer {
    box-shadow: 0 1rem 1.5rem -0.5rem rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border-radius: 20px;
    margin: 20px 10px;
    padding: 20px;
    box-sizing: border-box;
    ul {
      list-style: none;
      li {
        display: flex;
        align-items: flex-start;
        margin-bottom: 16px;

        .bullet {
          color: #fed73b;
          margin-right: 12px;
          font-size: 16px;
          line-height: 1.6;
          min-width: 16px;
        }
        .content {
          font-size: 15px;
          color: #2c3e50;
          line-height: 1.6;
        }
      }
    }
  }
}
.four-row {
  border-radius: 20px;
  background: linear-gradient(180deg, #f4f4d0, #fff);
  padding: 20px 16px;
  margin-bottom: 20px;
  .four-row-title {
    text-align: center;
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 16px;
  }
  .four-row-header {
    color: #999;
    font-size: 16px;
    margin-bottom: 20px;
    text-align: center;
  }
  .four-row-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 16px;
    gap: 16px;
    padding: 16px;
    .four-content-item {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      transition: transform 0.2s ease;
      height: 100%;
      display: flex;
      flex-direction: column;
      &:hover {
        transform: translateY(-1px);
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
      }
      .four-content-item-title {
        background: #f7f7f7;
        padding: 16px;
        font-size: 15px;
        color: #2c3e50;
        font-weight: 600;
      }
      .four-content-item-content {
        background: #fff;
        padding: 16px;
        color: #34495e;
        font-size: 14px;
        line-height: 1.5;
      }
    }
  }
}
.seven-row {
  border-radius: 20px;
  background: linear-gradient(180deg, #f4f4d0, #fff);
  padding: 10px 16px;
  margin-bottom: 20px;
  .seven-row-title {
    text-align: center;
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  .seven-row-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
  }
  .seven-row-footer {
    text-align: center;
    font-size: 14px;
    color: #1677ff;
    cursor: pointer;
    margin-bottom: 20px;
  }
}
.eight-row {
  width: 60%;
  margin: 60px auto;
  .eight-row-btn {
    background: linear-gradient(145deg, #604d43, #2e2927);
    color: #f0e6d1;
    border-radius: 50px;
    padding: 15px 24px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    &:hover {
      transform: translateY(-1px);
      box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
    }
  }
}
</style>
